<template>
  <div class="roles">
     <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>角色列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-button class='btn' plain type='success'>添加角色</el-button>

    <!-- 表格 -->
    <el-table :data='roleList'>
      <el-table-column type='expand'>
        <template v-slot='{row}'>
          <el-row  class='l1' v-for='l1 in row.children' :key='l1.id'>
            <el-col :span='4'><el-tag icon='el-icon-close' @close='delRight(row,l1.id)' closable >{{ l1.authName}}</el-tag><i class="el-icon-arrow-right"></i>
            </el-col>
            <el-col :span='20'>
               <el-row class='l2' v-for='l2 in l1.children' :key='l2.id'>
                <el-col :span='4'>
                  <el-tag   closable icon='el-icon-close' @close='delRight(row,l2.id)'   type='success'>{{ l2.authName}}</el-tag >
                </el-col>
                <el-col :span='20'>
                  <i class="el-icon-arrow-right"></i>
                   <el-tag icon='el-icon-close' class="l3" closable @close='delRight(row,l3.id)' type='warning' v-for='l3 in l2.children' :key='l3.id'>{{ l3.authName}}</el-tag>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column label='#' type='index'></el-table-column>
      <el-table-column label='角色名称' prop='roleName'></el-table-column>
      <el-table-column label='描述' prop='roleDesc'></el-table-column>
      <el-table-column label='操作'>
       <template v-slot='{ row }'>
          <el-button type='primary' plain size='small' icon='el-icon-edit'></el-button>
          <el-button type='danger' icon='el-icon-delete' plain size='small'></el-button>
          <el-button type='success' @click="showAssignDialog(row)" plain size='small' icon='el-icon-check'>分配权限</el-button>
       </template>
      </el-table-column>
    </el-table>

      <!-- 添加的对话框 -->
    <el-dialog
      title="权限分配"
      :visible.sync="dialogVisible"
      width="40%">

      <el-tree :data="data" ref='tree' default-expand-all  node-key="id" show-checkbox :props="defaultProps" ></el-tree>

       <template v-slot:footer>
          <span  class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="assignRights">分配</el-button>
          </span>
       </template>
    </el-dialog>

  </div>
</template>

<script>
export default {
  data () {
    return {
      roleList: [],
      dialogVisible: false,
      // 用于展示的数据
      data: [],
      // 默认的配置属性
      defaultProps: {
        children: 'children',
        // 配置显示的文本
        label: 'authName'
      },
      roleId: ''
    }
  },
  created () {
    this.getRoleList()
  },
  methods: {
    async getRoleList () {
      const { meta, data } = await this.$axios.get('roles')
      if (meta.status === 200) {
        this.roleList = data
      } else {
        this.$message.error(meta.msg)
      }
    },
    async  delRight (row, rightId) {
      const { meta, data } = await this.$axios.delete(`roles/${row.id}/rights/${rightId}`)
      if (meta.status === 200) {
        this.$message.success(meta.msg)
        // 其实只需要更新当前角色的 row.children 即可部分刷新
        // console.log(data)
        row.children = data
      } else {
        this.$message.error(meta.msg)
      }
    },
    async showAssignDialog (row) {
      this.roleId = row.id
      this.dialogVisible = true
      // 发送ajax请求, 获取全部的权限(树形结构), 进行渲染树形组件
      const { meta, data } = await this.$axios.get('rights/tree')
      if (meta.status === 200) {
        // 获取数据, 展示完整的树形结构
        this.data = data
        // 还需要将角色已有的权限进行回显  难点
        const ids = []
        row.children.forEach(l1 => {
          l1.children.forEach(l2 => {
            l2.children.forEach(l3 => {
              ids.push(l3.id)
            })
          })
        })
        console.log(ids.sort())
        // 简单的回显方法
        this.$refs.tree.setCheckedKeys(ids)
      } else {
        this.$message.error(meta.msg)
      }
    },
    async  assignRights () {
      // 1. 获取到所有的选中的权限 (全选的 和 半选的都要)
      const ids = this.$refs.tree.getCheckedKeys()
      const halfs = this.$refs.tree.getHalfCheckedKeys()
      const rids = [...ids, ...halfs].join(',')
      console.log(rids)
      const { meta } = await this.$axios.post(`roles/${this.roleId}/rights`, { rids })
      if (meta.status === 200) {
        this.dialogVisible = false
        this.$message.success(meta.msg)
        this.getRoleList()
      } else {
        this.$message.error(meta.msg)
      }
    }
    // 自己写的方法不行（获取key时 掉了half） 还有一个侧边栏渲染
  }
}
</script>

<style lang='scss' scoped>
.btn{
    margin-bottom: 15px;
}
.l1 {
  margin-bottom: 5px;
  border-bottom: 1px dotted #ccc;
}
.l2 {
  margin-bottom: 15px;
}
.l3 {
  margin-right: 5px;
  margin-bottom: 5px;
}
</style>
